<template>
    <div class="search-page"> 
        <!-- Header组件 -->
        <Header>
            <template v-slot:left>
                <span @click="$router.go(-1)">&lt;</span>
            </template>
            <template v-slot:middle>
                搜索
            </template>
        </Header>

        <!-- 输入框 -->
        <div class="input-box">
            <input type="text" placeholder="输入商家" v-model="inputText" @input="search">
        </div>

        <!-- 放置搜索结果 -->
        <div class="list">
            <div class="item" v-for="(item,index) in searchResult" :key="index">
                <div class="pic">
                    <img :src="item.pic" alt="">
                </div>
                <div class="text">
                    <div class="name">{{item.name}}</div>
                    <div>月售 {{item.buyCount}}</div>
                    <div>描述 {{item.desc}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data(){
        return {
            searchResult:[],//搜索结果
            inputText:''//输入框的值
        }
    },
    methods:{
        search(){
            if(this.inputText.trim())//当输入框有数据 做模糊搜索
                this.searchResult = this.$route.params.shoplist.filter((item)=>{
                return item.name.includes(this.inputText);
            })
            else //输入框没数据,清除之前的搜索结果.
                this.searchResult = [];
        }
    }
}
</script>
<style scoped>
.search-page .input-box{
  padding: 20px;
}
.search-page .input-box input{
  background-color: #f0f0f0;
  border-radius: 20px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  width: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
}

.list .item{
  display: flex;
  margin: 20px;
}
.list .item .pic{
  width: 70px;
  margin-right: 20px;
}
.list .item .pic img{
  width: 100%;
}
.list .item .text{
  font-size: 14px;
  flex: 1;
}
.list .item .text .name{
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}
</style>